<template>
  <div class='trigger-node' @click="open">
    <div class="header">
      {{ $t('trigger.text7') }}
      <i class="iconfont icon-thunderbolt" />
    </div>
    <div class="app-info" v-if="actionName">
      <span>{{ actionName }}</span>
      <i class="iconfont icon-right1" />
    </div>
    <div class="app-info-empty" v-else>
      {{ $t('common.base.pleaseSelect') }}
      <i class="iconfont icon-right1" />
    </div>
  </div>
</template>
<script>
export default {
  name:'trigger',
  props:{
    nodeConfig:{
      type:Object,
      default:()=>({})
    },
    parent:{
      type:Object,
      default:()=>({})
    },
  },
  watch:{
    nodeConfig:{
      handler(newVal){
        this.app = newVal
        this.actionName = newVal?.data?.bizActionName || ''
      },
      deep:true,
      immediate:true
    },
    parent:{
      handler(newVal){
        // console.log('node trigger parent', newVal);
      },
      deep:true,
      immediate:true
    },

  },
  data(){
    return {
      app:this.nodeConfig,
      actionName: this.nodeConfig?.data?.bizActionName || '',
    }
  },
  methods:{
    open(){
      this.$emit('open')
    },
  },
}

</script>
<style lang="scss" scoped>
.trigger-node {
  .app-info {
    height: auto;
  }
}
.app-info-empty{
  ::v-deep .el-select {
    border: none!important;
    width:100%;
    .el-input__inner{
      padding-right: 0!important;
      border: none;
    }
  }
}

</style>